<template>
  <div class="nav">
    <el-row type="flex" justify="space-between" align="middle">
      <el-col :span="8">
        <p class="flex-center">
          <img :src="logo" class="logo"/>&nbsp;
          集鲜丰后台管理系统
        </p>
      </el-col>
      <el-col :span="16">
        <el-row :gutter="10" type="flex" justify="end" align="middle" class="text-right">
          <!--<el-col>-->
            <!--<el-badge :value="12" class="badge">-->
              <!--<i class="el-icon-message"></i>-->
            <!--</el-badge>-->
            <!--<el-badge :value="6" class="badge">-->
              <!--<i class="el-icon-bell"></i>-->
            <!--</el-badge>-->
          <!--</el-col>-->
          <el-col>
            <img class="headImg" :src="userInfo.headImg" alt="">
          </el-col>
          <el-col>
            <span>{{userInfo.userName}}</span>
          </el-col>
          <el-col>
            <el-dropdown :hide-on-click="true">
            <span class="el-dropdown-link">
              <i class="el-icon-caret-bottom el-icon--right c-white"></i>
            </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="goHome">回到首页</el-dropdown-item>
                <el-dropdown-item @click.native="goBasicInfo">个人信息</el-dropdown-item>
                <el-dropdown-item @click.native="resetPwdShow = true">修改密码</el-dropdown-item>
                <el-dropdown-item @click.native="loginOut">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <ResetPassword :resetPwdShow.sync="resetPwdShow"></ResetPassword>
  </div>
</template>

<script>
  import logo from '@/assets/images/logo.png'
  import ResetPassword from "./components/ResetPassword"

  export default {
    name: 'NavigationBar',
    components: {ResetPassword},
    data() {
      return {
        logo:  logo,
        userInfo: {
          userName: "",
          userRole: "",
          headImg: ""
        },
        resetPwdShow: false
      }
    },
    methods: {
      initUserInfo() {
        if (window.localStorage.adminLogin) {
          this.userInfo = JSON.parse(window.localStorage.adminLogin)
        } else {
          this.$router.push({name: 'login'})
        }
      },
      loginOut() {
        window.localStorage.removeItem('adminLogin')
        this.$router.push({name: 'login'})
      },
      goBasicInfo() {
        this.$router.push({name: 'accountSet'})
      },
      goHome() {
        this.$router.push({name: 'home'})
      }
    },
    created() {
      this.initUserInfo()
    }
  }
</script>

<style lang="scss" scoped>
  .nav, .nav > div {
    height: 100%;
    p em {
      padding: 0 10px;
    }
    .headImg {
      display: inline-block;
      width: 30px;
      height: 30px;
      border-radius: 100%;
      background-color: #f1f1f1;
    }
    .badge {
      margin-right: 30px;
      i {
        font-size: 24px;
      }
    }
    .el-col{
      display: inline-block;
      width: auto;
    }
  }
  .logo {
    width: 40px;
    height: 40px;
  }
  .flex-center {
    display: flex;
    align-items: center;
  }
</style>
